<template>
    <div class="addaccount">
        <el-breadcrumb separator="/" class="bread">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/business' }">后台管理系统</el-breadcrumb-item>
            <el-breadcrumb-item>账户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-input style="width: 300px" v-model="searchName" prefix-icon="el-icon-search" placeholder="请输入内容"></el-input>
        <el-button type="primary" @click="addAccount">添加账户</el-button>
        <el-table
                :data="filterData"
                stripe
                style="width: 70%">
            <el-table-column
                    type="index"
                    label="#"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="account"
                    label="账号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="nickname"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="tel"
                    label="联系方式"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="jurisdiction"
                    label="权限"
                    :show-overflow-tooltip="true"
                    width="300">
                <template slot-scope="scope">
                    {{isSuper(scope)}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="operation"
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope)" type="text" size="small">删除</el-button>
                    <el-button @click="changeAccount(scope)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-show="isAdd" class="add-form">
            <i class="el-icon-error close-add-form" @click="closeForm"></i>
            <div class="new-data">
                <span>账号: </span>
                <el-input
                        style="width: 250px"
                        placeholder="请输入内容"
                        v-model="newData.account"
                        @input="repeat"
                        clearable>
                </el-input>
                <i v-show="isErr === 0" class="el-icon-error err-message">账号由纯数字组成，并且不为空</i>
                <i v-show="isErr === 5" class="el-icon-error err-message">账号已被注册</i>
            </div>
            <div class="new-data">
                <span>姓名: </span>
                <el-input
                        style="width: 250px"
                        placeholder="请输入内容"
                        v-model="newData.nickname"
                        clearable>
                </el-input>
                <i v-show="isErr === 1" class="el-icon-error err-message">请输入姓名</i>
            </div>
            <div class="new-data">
                <span>密码: </span>
                <el-input
                        style="width: 250px"
                        type="password"
                        placeholder="请输入内容"
                        v-model="newData.password"
                        clearable>
                </el-input>
                <i v-show="isErr === 2" class="el-icon-error err-message">请输入密码</i>

            </div>

            <div class="new-data">
                <span>联系方式: </span>
                <el-input
                        style="width: 250px"
                        placeholder="请输入内容"
                        v-model="newData.tel"
                        clearable>
                </el-input>
                <i v-show="isErr === 3" class="el-icon-error err-message">请输入联系方式</i>

            </div>
            <div class="new-data">
                <span>权限:</span>
                <el-checkbox-group
                        style="margin-top: 10px"
                        v-model="newData.jurisdiction">
                    <el-checkbox label="客服"></el-checkbox>
                    <el-checkbox label="商品管理"></el-checkbox>
                    <el-checkbox label="系统设置"></el-checkbox>
                    <el-checkbox label="订单管理"></el-checkbox>
                </el-checkbox-group>
                <i v-show="isErr === 4" class="el-icon-error err-message">请至少选择一个权限</i>

            </div>
            <el-button @click="submitForm(scope)" class="submit-form" type="primary" :disabled="unable">完成</el-button>
        </div>
        <shade v-show="isAdd"></shade>
    </div>
</template>

<script>
    import Shade from "../../../components/common/shade/Shade";
    import {sendwithpost} from "../../../network/profile";
    import {debounce} from "../../../common/util";

    export default {
        name: "AddAccount",
        data() {
            return {
                searchName: '',
                tableData: [],
                newData: {
                    account: '',
                    nickname: '',
                    tel: '',
                    jurisdiction: []
                },
                isAdd: false,
                scope: null,
                isErr: 9,
                unable: false,
                edit: null
            }
        },
        created() {
            sendwithpost({
                url: '/findAllAccount',
            }).then(res=> {
                this.tableData = res.data.accounts
            })
        },
        computed: {
            filterData() {
                const { searchName, tableData} = this;
                return tableData.filter(data=> {
                    return data.nickname.includes(searchName);
                })
            }
        },
        components: {
            Shade
        },
        methods: {
            handleClick(obj) {
                if (obj.row.isSuper) {
                    this.$message({
                        showClose: true,
                        message: '超级会员用户不允许删除',
                        type: 'warning'
                    })
                }else {
                    if (window.confirm(`确认删除${obj.row.nickname}`)) {
                        sendwithpost({
                            url: '/delAccount',
                            data: {
                                id: obj.row._id
                            }
                        }).then(res=> {
                            this.$message({
                                type: res.data.type,
                                message: res.data.message,
                                showClose: true
                            })
                            if (res.data.res_code == 2) {
                                this.update()
                            }
                        })
                    } else {
                        return
                    }
                }

            },
            addAccount() {
                this.isAdd = true
            },
            submitForm(scope) {
                let isNum = /^[1-9]*[1-9][1-9]$/
             if (!isNum.test(this.newData.account)) {
                 this.isErr = 0;
                 return
             }else {
                 if (this.newData.nickname === '') {
                     this.isErr = 1
                     return;
                 } else {
                     if(this.newData.password === '') {
                         this.isErr = 2
                         return;
                     }else {
                         if(this.newData.tel === '') {
                             this.isErr = 3
                             return;
                         } else  {
                             if (this.newData.jurisdiction.length === 0) {
                                 this.isErr = 4
                                 return;
                             } else {
                                 if(scope) {
                                     this.tableData.splice(scope.$index, 1, this.newData)
                                     sendwithpost({
                                         url: '/changeAccount',
                                         data: this.newData
                                     }).then(res=> {
                                         this.$message({
                                             showClose: true,
                                             message: res.data.message,
                                             type: res.data.type
                                         })
                                         if (res.data.res_code == 2) {
                                             this.update()
                                         }
                                     })
                                 }else {
                                     // this.tableData.push(this.newData)
                                     sendwithpost({
                                         url: '/addAccount',
                                         data: this.newData
                                     }).then(res=> {
                                         this.$message({
                                             showClose: true,
                                             message: res.data.message,
                                             type: res.data.type
                                         })
                                         if (res.data.res_code == 2) {
                                            this.update()
                                         }
                                     })
                                 }
                                 this.isAdd = false;
                                 this.scope = null;
                                 this.edit = null
                                 this.newData = {
                                     account: '',
                                     nickname: '',
                                     tel: '',
                                     jurisdiction: []
                                 }
                             }
                         }
                     }
                 }
             }
            },
            closeForm() {
                this.isAdd = false;
                this.scope = null;
                this.edit = null
                this.newData = {
                    account: '',
                        nickname: '',
                        tel: '',
                    jurisdiction: [],
                }
            },
            changeAccount(scope) {
                if (scope.row.isSuper) {
                    this.$message({
                        showClose: true,
                        message: '超级会员用户不允许更改',
                        type: 'warning'
                    })
                }else {
                    if (window.confirm('更改用户时，必须重新输入密码')) {
                        this.newData = {
                            ...scope.row
                        };
                        this.scope = scope;
                        this.isAdd = true;
                        this.edit = scope.row.account
                    }
                }
            },
            isSuper(scope) {
                if (scope.row.isSuper) {
                    return '超级管理员'
                }else {
                    return scope.row.jurisdiction.toString()
                }
            },
            update() {
                sendwithpost({
                    url: '/findAllAccount',
                }).then(res=> {
                    this.tableData = res.data.accounts
                })
            },
            repeat() {
                debounce(
                    sendwithpost({
                        url: '/inspect',
                        data: {
                            account: this.newData.account,
                            edit: this.edit
                        }
                    }).then(res=> {
                        if (res.data.res_code == 1) {
                            this.isErr = 5
                            this.unable = true
                        }else {
                            this.isErr = 9
                            this.unable = false
                        }
                    })
                )
            }
        }
    }
</script>

<style scoped>
    .bread {
        margin-bottom: 20px;
        position: relative;
    }
    .add-form {
        padding: 30px;
        position: absolute;
        top: 200px;
        left: 600px;
        z-index: 9;
        background-color: #ffffff;
    }
    .new-data {
        display: flex;
        margin-top: 20px;
        width: 800px;

    }
    .new-data span {
        width: 100px;
        text-align: right;
        line-height: 40px;
        margin-right: 20px;

    }
    .submit-form {
        margin-left: calc(50% - 56px);
    }
    .err-message {
        color: red;
        line-height: 40px;
        margin-left: 25px;
    }
    .close-add-form {
        font-size: 20px;
        position: absolute;
        color: #b0b0b0;
        top: 20px;
        right: 20px;
        cursor:pointer;
    }
</style>